<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
 <!-- <div id="app"> {{ message }} </div> -->
 <input type="text" >
 <p></p>
  <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> -->
  <!-- <script>
    var app = new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue!'
      }
    })
    console.log(app)
  </script> -->
  <!-- v-model 双向绑定  原理  :value + @input
       数据驱动视图  视图驱动数据
       Object.defineProperty vue2的数据劫持
       Proxy vue3的数据劫持
  -->
  <script>
    //  Vue中data节点我们自己的定义的数据,vue内部会将这些数据劫持下来,搞一份新的对象. 这个对象和data中返回的对象是一模一样的
    // 双向绑定修改的值  Object.defineProperty set触发了, 反向的将_data中的数据 同步给了 data 中写的数据
    const data = { msg: 'hello' }
    const _data = {}  // vue中内部 一直在玩的是这个数据  data只是一直被同步的数据

    Object.defineProperty(_data, 'msg', {
      get(){
        return data.msg
      },
      set(val){
        console.log(val)
        data.msg = val
        p.innerHTML = val
      }
    })
    console.log(_data)
    console.log(data)

    const ipt = document.querySelector('input')
    const p = document.querySelector('p')
    ipt.value = _data.msg
    p.innerHTML = _data.msg
    // 输入框输入的信息 会同步给_data的数据
    ipt.addEventListener('input', (e)=> {
      console.log(e.target.value)
      _data.msg = e.target.value
    })
  </script>
</body>
</html>